<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { useGetOptions } from '@/services/pages/return-factory/useModule'
  import _ from 'lodash'
  import { SearchForm } from './types'

  const { options, getOptionsLoading, getOptionsParam, getOptions } = useGetOptions()

  defineOptions({
    name: 'HeaderReturnFactoryList',
  })

  const emits = defineEmits<{
    (e: 'get-list', value: SearchForm): void
    (e: 'reset'): void
  }>()

  // 全局路由对象
  const router = useRouter()

  // 搜索表单
  const searchForm = ref<SearchForm>({
    repairModuleId: '',
    repairNo: '',
    status: '',
    userKeyword: '',
    repairCompanyId: '',
    repairCompanyName: '',
    repairCompanyPhone: '',
  })

  // 状态下拉选项
  const statusOptions = ref([
    { label: '待审核', value: 1 },
    { label: '待退回', value: 2 },
    { label: '待确认', value: 3 },
    { label: '处理中', value: 4 },
    { label: '待寄回', value: 5 },
    { label: '待签收', value: 6 },
    { label: '已完成', value: 7 },
    { label: '已取消', value: 8 },
  ])

  /**
   * 新建返厂
   */
  const onAddReturnFactory = () => {
    router.push({ path: '/return/factory/new' })
  }

  /**
   * 获取返厂模块下拉
   */
  const handleGetModuleOptions = _.debounce((keyword: string) => {
    if (getOptionsParam.value.name !== keyword) {
      getOptionsParam.value.name = keyword
      getOptions()
    }
  }, 600)

  /**
   * 获取列表
   */
  const getList = async () => {
    emits('get-list', { ...searchForm.value })
  }

  /**
   * 重置事件
   */
  const onReset = () => {
    searchForm.value = {
      repairModuleId: '',
      repairNo: '',
      status: '',
      userKeyword: '',
      repairCompanyId: '',
      repairCompanyName: '',
      repairCompanyPhone: '',
    }
    getList()
  }

  defineExpose({
    getModuleOptions: getOptions,
  })
</script>

<template>
  <div class="return-factory-list-header">
    <div class="btn-group">
      <h-plain-button v-permission="'retrunFactory_add'" @click="onAddReturnFactory">
        新建返厂
      </h-plain-button>
    </div>

    <div class="search">
      <!-- 返厂模块 -->
      <el-select
        v-model="searchForm.repairModuleId"
        placeholder="请选择返厂模块"
        class="return-factory-module"
        clearable
        filterable
        :filter-method="handleGetModuleOptions"
        :loading="getOptionsLoading"
        @change="getList"
        @clear="getList"
      >
        <el-option
          v-for="(option, index) in options"
          :key="index"
          :label="option.name"
          :value="option.id"
        ></el-option>
      </el-select>

      <!-- 状态 -->
      <el-select
        v-model="searchForm.status"
        placeholder="请选择状态"
        class="status"
        clearable
        @change="getList"
        @clear="getList"
      >
        <el-option
          v-for="(status, index) in statusOptions"
          :key="index"
          :label="status.label"
          :value="status.value"
        />
      </el-select>

      <!-- 返厂单号 -->
      <el-input
        v-model.trim="searchForm.repairNo"
        placeholder="请输入返厂单号"
        clearable
        class="return-factory-no"
        @keyup.enter="getList"
        @clear="getList"
      />

      <!-- 关键字 -->
      <el-input
        v-model.trim="searchForm.userKeyword"
        placeholder="请输入客户名称/手机号"
        clearable
        class="keyword"
        @keyup.enter="getList"
        @clear="getList"
      />

      <!-- 报单公司 -->
      <el-input
        v-model.trim="searchForm.repairCompanyName"
        placeholder="请输入报单公司"
        clearable
        style="width: 120px"
        @keyup.enter="getList"
        @clear="getList"
      />

      <!-- 报单公司电话-->
      <el-input
        v-model.trim="searchForm.repairCompanyPhone"
        placeholder="请输入报单公司电话"
        clearable
        style="width: 130px"
        @keyup.enter="getList"
        @clear="getList"
      />

      <h-button type="primary" @click="getList">
        <el-icon>
          <Search></Search>
        </el-icon>
        搜索
      </h-button>

      <h-button @click="onReset">
        <el-icon>
          <refresh-right></refresh-right>
        </el-icon>
        重置
      </h-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-list-header {
    display: flex;
    justify-content: space-between;

    .search {
      display: flex;
      column-gap: 5px;

      .return-factory-module {
        width: 180px;
      }

      .status {
        width: 120px;
      }

      .return-factory-no {
        width: 140px;
      }

      .keyword {
        width: 180px;
      }
    }
  }
</style>
